<template>
	<view class="content">
		<view class="logistics-block block">
			<view class="info-item" @click="navigate('/page_other/shopping/detail?id='+info.id)"
				v-if="info.status!==1&&info.deliveryVo">
				<view class="iconfont icon-peihuo" style="color: #46AD35;"></view>
				<view class="title-item">
					<view class="title">
						<view class="text" style="color: #46AD35;">
							{{info.deliveryVo.result.list[0].status}}
						</view>
						<view class="time">{{info.deliveryVo.result.list[0].time}}</view>
					</view>
					<image class="more"
						src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more.png">
					</image>
				</view>
			</view>
			<view class="info-item">
				<view class="iconfont icon-dizhiguanli"></view>
				<view class="title-item">
					<view class="title">
						<view class="address" v-if="info.addressModel">
							{{info.addressModel.contacts}},{{info.addressModel.phone}},{{info.addressModel.area}},{{info.addressModel.address}}
						</view>
						<view class=""></view>
					</view>
				</view>
			</view>
		</view>
		<view class="activity-item block">
			<view class="activity-middle">
				<view class="middle-right">
					<view class="info-top">
						<view class="info-title">
							{{info.hitPrize}}
						</view>
						<view class="involution">
							共1件
						</view>
					</view>
				</view>
			</view>
			<view class="activity-bottom">
				<view class="cancel">
					订单编号：{{info.orderSn}}
				</view>
				<view class="cancel" v-if="info.deliveryVo.result.expName">
					物流公司：{{info.deliveryVo.result.expName}}
				</view>
				<view class="cancel" v-if="info.deliveryVo.result.number">
					快递单号：{{info.deliveryVo.result.number}}
				</view>
				<view class="cancel">
					中奖时间：{{info.drawTime}}
				</view>
			</view>
		</view>
		<view class="btn-block" v-if="info.status!==1">
			<view class="step" @click="navigate('/page_other/shopping/detail?id='+info.id)" v-if="info.deliveryVo">查看物流
			</view>
			<view class="step" @click="confirm" v-if="info.isSend==3">确认收货</view>
		</view>
	</view>
</template>

<script>
	import {
		getRecordDetail,
		confirmRecord
	} from '@/api/integral.js';
	import {
		showToast
	} from '@/util/util.js'
	import {
		getStorage
	} from '@/util/auth.js';
	export default {
		data() {
			return {
				info: {
					createTime: '',
					deliveryVo: {
						result: {
							expName: '',
							number: '',
							list: []
						}
					},
					orderSn: '',
					voucher: '',
					goodsFace: '',
					addressModel: {
						contacts: '',
						area: '',
						address: '',
						phone: ''
					},
					goodsId: '',
					goodsName: '',
					number: '',
					integral: '',
					voucher: ''
				},
				id: null,
				longitude: '',
				latitude: ''
			}
		},
		methods: {
			//用户查询积分订单详情
			getIntegralOrderById() {
				getRecordDetail({
					id: this.id
				}).then((res) => {
					this.info = res
				})
			},
			confirm() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '您确定收到货了吗？',
					cancelText: '取消',
					confirmText: '确认收货',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							confirmRecord({
								orderSn: that.info.orderSn
							}).then((res) => {
								uni.showTosast('收货成功', () => {
									uni.redirectTo({
										url: '/page_other/mine/mine'
									})
								}, 1000)
							})
						}
					}
				})
			},
		},
		onLoad(e) {
			this.id = e.id;
			this.getIntegralOrderById()
		},
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		padding-bottom: 20rpx;
		background: #EFEFEF;
		padding: 30rpx;

		.block {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
		}

		.logistics-block {
			.info-item:last-child {
				border-bottom: none;
				padding-top: 20rpx;
			}

			.info-item {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #EFEFEF;
				padding-bottom: 20rpx;

				.iconfont {
					width: 80rpx;
					font-size: 38rpx;
					color: #FF2F34;
				}

				.title-item {
					width: calc(100% - 80rpx);
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						width: calc(100% - 45rpx);
						margin-top: 10rpx;

						.text {
							width: 100%;
							font-size: 32rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.address {
							font-size: 32rpx;
						}

						.time {
							font-size: 26rpx;
							color: #999;
							margin-top: 15rpx;
						}
					}

					.more {
						width: 35rpx;
						height: 35rpx;
					}
				}
			}
		}

		.activity-item {
			margin-top: 30rpx;

			.activity-middle {
				display: flex;

				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					border-radius: 20rpx;
				}

				.middle-right {
					width: calc(100% - 140rpx);
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.info-top {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.info-title {
							width: calc(100% - 120rpx);
							font-size: 30rpx;
						}

						.involution {
							width: 120rpx;
							text-align: end;
							color: #767676;
							font-size: 28rpx;
						}
					}

					.info-time {
						font-size: 28rpx;
						font-weight: bold;
						line-height: normal;
						letter-spacing: 0em;
						color: #1A1A1A;
					}
				}
			}

			.activity-bottom {
				border-top: 1px solid #EFEFEF;
				font-size: 26rpx;
				color: #767676;
				margin-top: 20rpx;
				padding-top: 20rpx;

				.cancel {
					margin-bottom: 15rpx;
				}
			}
		}

		.btn-block {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: fixed;
			background: #fff;
			height: 180rpx;
			padding: 30rpx;
			bottom: 0;
			left: 0;

			.step:first-child {
				color: #FF2F34;
				background: none;
				border: 1px solid #FF2F34;
				margin-right: 20rpx;
			}

			.step {
				width: 30%;
				height: 80rpx;
				display: flex;
				background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
				color: #fff;
				border-radius: 60rpx;
				justify-content: center;
				align-items: center;
			}
		}

	}
</style>